<template>
  <div class="shoppingDetails" ref="homePage">
    <div class="bj">
      <van-nav-bar title="购物详情" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in datalist.FocusImgs" :key="index">
        <img style="width: 100%;height: 100%;" :src="image.ImgSrc" />
      </van-swipe-item>
    </van-swipe>
    <div class="details_bottom">
      <div class="Introduction">
        <div class="Introduction_wz">
          <span class="Introduction_size">{{datalist.Name}}</span>
          <span></span>
        </div>
        <span style="font-size: 28px;color: #46d0ca;">{{datalist.Score}}分</span>
      </div>
      <div class="navigation" @click="tiaozhuanditu">
        <van-icon size="18px" color="#46d0ca" name="location" />
        <p style="margin-left: 5px;">{{datalist.Address}}</p>
        <van-icon name="arrow" />
      </div>
      <div class="navigation">
        <van-icon size="18px" color="#46d0ca" name="clock" />
        <p style="margin-left: 5px;">{{datalist.OpeningTime}}</p>
      </div>

      <div class="navigation" style="width: 120px;justify-content: space-between;">
        <div style="display: flex;align-items: center;" @click="tiaozhuanditu">
          <van-icon size="18px" color="#46d0ca" name="https://www.anyiyou.cn/public/statics/img/daohang.png" />
          <span style="margin-left: 5px;">导航</span>
        </div>
        <div style="display: flex;align-items: center;">
          <van-icon size="18px" color="#46d0ca" name="https://www.anyiyou.cn/public/statics/img/che.png" />
          <span style="margin-left: 5px;">打车</span>
        </div>
      </div>
    </div>
    <div class="merchant">
      <p class="merchant_tet">商户简介</p>
      <p style="font-size: 14px;" v-html="datalist.Content"></p>
    </div>
    <div class="nearby" style="margin-top: 5px;">
      <p class="nearby_tet">附近推荐</p>
      <div class="food_content" v-for="(itme,index) in nearby" :key="index" @click="newnearby(itme.shpSN)">
        <div class="system_img"><img :src="itme.Cover"></div>
        <div class="system_content">
          <p class="theme">{{itme.Name}}</p>
          <div class="minute">
            <span class="minute_minute">{{itme.Score}}</span>
            <span class="minute_price" style="font-size: 12px;">￥{{itme.PerCost}}/人</span>
          </div>
          <div class="tired">
            <div class="title">
              <van-tag color="#46d0ca" plain v-for="(data,index) in itme.Tags" :key="index">{{data}}</van-tag>
            </div>
            <span style="font-size: 12px;">距离{{itme.Distance}}米</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import {
  ShopDetails,
  ShopList
} from '@/api/home.js'
export default {

  data () {
    return {
      clintHeigth: '', // 获取页面高度
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      datalist: [], // 商品数据
      nearby: [], // 附近推荐
      images: [
        'https://resource.sz-trip.com/uploads/20180612/ca83b168e92ea2751a6689e38608eb8a.jpg',
        'https://resource.sz-trip.com/wximg/Nighttour/Nighttour001.jpg',
        'https://resource.sz-trip.com/uploads/20191022/122de6bfc4afcd434392e9e5d50f4824.jpg'
      ]
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
    this.ShopDetails()
    this.ShopList()
  },
  methods: {
    tiaozhuanditu () {
      let name = this.datalist.Name
      window.location.href = 'https://map.baidu.com/mobile/webapp/place/marker/qt=inf&vt=map&act=read_share&code=131/third_party=uri_api&point=' + this.datalist.Lat + '%' + this.datalist.Lng + '&title=' + name + ''
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    ShopDetails () {
      let data = {
        'shpSN': this.$route.query.shpSN
      }
      ShopDetails(data).then(res => {
        console.log(res)
        this.images = res.Item.Cover
        this.datalist = res.Item
      })
    },
    ShopList () {
      let data = {
        'PageNo': 1, // 页码
        'Lng': this.jinweilng, // 经纬度
        'Lat': this.jinweilat,
        'Type': 1
      }
      ShopList(data).then(res => {
        this.nearby = res.List
      })
    },
    newnearby (shpSN) {
      this.$route.query.shpSN = shpSN
      this.ShopDetails()
      window.scroll(0, 0)
    }
  }
}
</script>

<style lang="scss">
.shoppingDetails {
  background: white;

  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .van-nav-bar {
    .van-nav-bar__left {
      .van-icon {
        color: #46d0ca;
        font-size: 18px;
      }
    }

    .van-nav-bar__title {
      color: #000000;
    }
  }

  .van-swipe {
    width: 100%;
    height: 250px;

    .van-swipe__indicators {
      .van-swipe__indicator--active {
        background: #46d0ca !important;
      }
    }
  }

  .details_bottom {
    width: 95%;
    margin: 0 auto;

    .Introduction {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;

      .Introduction_wz {
        display: flex;
        flex-direction: column;
        width: 70%;
        height: 40px;
        justify-content: center;
        .Introduction_size {
          font-size: 18px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .navigation {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 13px;
      padding: 2px 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .merchant {
    width: 100%;
    height: auto;
    margin: 10px auto;
    border-top: #f0f0f0 solid 10px;
    border-bottom: #f0f0f0 solid 10px;
    p {
      font-size: 12px !important;
      padding: 0px 5px;
    }
    .merchant_tet {
      font-size: 20px !important;
      padding: 10px 10px;
    }
  }

  .nearby {
    width: 100%;

    // background: #f1f1f1;
    .nearby_tet {
      width: 95%;
      margin: 0 auto;
      font-size: 20px !important;
      padding-left: 5px;
      // background: #f6f4f4;
    }

    .food_content {
      width: 100%;
      height: 130px;
      padding: 10px;
      display: flex;

      .system_img {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      .system_content {
        width: 70%;

        .theme {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #5c5c5c;
          padding: 2px 10px;
          font-size: 18px;
        }

        .minute {
          font-weight: 400;
          padding: 10px;

          .minute_minute {
            font-size: 20px;
            color: #46d0ca;
            // padding: 10px;
          }
        }

        .tired {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;

          .title {
            .van-tag {
              margin: 2px;
            }
          }
        }
      }
    }
  }
}
</style>
